
//数据统计
<template>
  <div>
    <div>
      <img src="" alt="" />
    </div>
    <div id="china"></div>
    <div id="BRICS"></div>
  </div>
</template>

<script>
let echarts = require("echarts");
import china from "./china.js";
export default {
  data() {
    return {};
  },
  computed: {},
  methods: {
    getOption() {
      return {
        title: {
          text: "金砖五国最近一周新增确诊人数",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: ["中国", "巴西", "俄罗斯", "印度", "南非"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: [
            "1月2日-----",
            "1月2日-----",
            "1月3日-----",
            "1月4日-----",
            "1月5日-----",
            "1月6日-----",
            "1月7日-----",
          ],
        },
        series: [
          {
            name: "中国",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight",
            },
            data: [89, 67, 65, 78, 89, 66, 90],
          },
          {
            name: "巴西",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight",
            },
            data: [25445, 25019, 69826, 24605, 15827, 17341, 56648],
          },
          {
            name: "俄罗斯",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight",
            },
            data: [27250, 28552, 27039, 26301, 24150, 23351, 24246],
          },
          {
            name: "印度",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight",
            },
            data: [26624, 23950, 22890, 18177, 16504, 16505, 13560],
          },
          {
            name: "南非",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight",
            },
            data: [3000, 2158, 2000, 2550, 2358, 1859, 2685],
          },
        ],
      };
    },
    toDraw() {
      let chart = echarts.init(document.getElementById("BRICS"));
      let option = this.getOption();
      chart.setOption(option);
    },
    randomData() {
      return Math.round(Math.random() * 1000);
    },
    randomData1() {
      return Math.round(Math.random() * 100);
    },
    China() {
      var mydata = [
        {
          name: "北京",
          value: this.randomData(),
        },
        {
          name: "天津",
          value: this.randomData(),
        },
        {
          name: "上海",
          value: this.randomData(),
        },
        {
          name: "重庆",
          value: this.randomData(),
        },
        {
          name: "河北",
          value: this.randomData(),
        },
        {
          name: "河南",
          value: this.randomData(),
        },
        {
          name: "云南",
          value: this.randomData(),
        },
        {
          name: "辽宁",
          value: this.randomData(),
        },
        {
          name: "黑龙江",
          value: this.randomData(),
        },
        {
          name: "湖南",
          value: this.randomData(),
        },
        {
          name: "安徽",
          value: this.randomData(),
        },
        {
          name: "山东",
          value: this.randomData(),
        },
        {
          name: "新疆",
          value: this.randomData(),
        },
        {
          name: "江苏",
          value: this.randomData(),
        },
        {
          name: "浙江",
          value: this.randomData(),
        },
        {
          name: "江西",
          value: this.randomData(),
        },
        {
          name: "湖北",
          value: this.randomData(),
        },
        {
          name: "广西",
          value: this.randomData(),
        },
        {
          name: "甘肃",
          value: this.randomData(),
        },
        {
          name: "山西",
          value: this.randomData(),
        },
        {
          name: "内蒙古",
          value: this.randomData(),
        },
        {
          name: "陕西",
          value: this.randomData(),
        },
        {
          name: "吉林",
          value: this.randomData(),
        },
        {
          name: "福建",
          value: this.randomData(),
        },
        {
          name: "贵州",
          value: this.randomData(),
        },
        {
          name: "广东",
          value: this.randomData(),
        },
        {
          name: "青海",
          value: this.randomData(),
        },
        {
          name: "西藏",
          value: this.randomData(),
        },
        {
          name: "四川",
          value: this.randomData(),
        },
        {
          name: "宁夏",
          value: this.randomData(),
        },
        {
          name: "海南",
          value: this.randomData(),
        },
        {
          name: "台湾",
          value: this.randomData(),
        },
        {
          name: "香港",
          value: this.randomData(),
        },
        {
          name: "澳门",
          value: this.randomData(),
        },
      ];
      var optionMap = {
        // backgroundColor: '#FFFFFF',
        title: {
          text: "全国疫情大数据",
          subtext: "",
          x: "center",
        },
        tooltip: {
          trigger: "item",
        },
        //左侧小导航图标
        visualMap: {
          show: true,
          x: "left",
          y: "center",
          splitList: [
            {
              start: 600,
              end: 1000,
            },
            {
              start: 500,
              end: 600,
            },
            {
              start: 400,
              end: 500,
            },
            {
              start: 300,
              end: 400,
            },
            {
              start: 200,
              end: 300,
            },
            {
              start: 100,
              end: 200,
            },
            {
              start: 0,
              end: 100,
            },
          ],
          // color: ['#5475f5', '#9feaa5', '#85daef', '#74e2ca', '#e6ac53', '#9fb5ea']
          color: [
            "#F44A43",
            "#F77C67",
            "#FA997D",
            "#FCAE8C",
            "#FDCAA0",
            "#FFE6B3",
          ],
        },
        //配置属性
        series: [
          {
            name: "确诊人数",
            type: "map",
            mapType: "china",
            roam: true,
            label: {
              normal: {
                show: true, //省份名称
              },
              emphasis: {
                show: true,
              },
            },
            data: mydata, //数据
          },
        ],
      };
      //初始化echarts实例
      var myChart = echarts.init(document.getElementById("china"));
      //使用制定的配置项和数据显示图表
      myChart.setOption(optionMap);
    },
  },
  created() {},
  mounted() {
    this.China();
    this.toDraw();
  },
};
</script>
<style  scoped>
#china {
  width: 100%;
  height: 600px;
}
#BRICS {
  height: 300px;
  width: 100%;
}
</style>